<template>
  <div class="list-box">
    <div class="title-header-box">
      <div class="header-title">{{resource.typeName}}系列教程</div>
      <div class="header-text">
            {{resource.description}}
      </div>
    </div>

    <el-row :gutter="0" type="flex" align="top">
      <el-col class="samehlp" :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
        <el-row :gutter="0">
          <el-col v-for="item in courses" :key="item.id" class="shadow-box" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-row :gutter="0" type="flex" align="middle">
              <el-col class="overhdbox" :xs="8" :sm="10" :md="10" :lg="8" :xl="8">
                <nuxt-link to="/">
                  <el-image :src="item.image">
                    <div slot="placeholder" class="image-slot">
                      加载中
                      <span class="dot">...</span>
                    </div>
                  </el-image>
                </nuxt-link>
              </el-col>
              <el-col :xs="16" :sm="14" :md="14" :lg="16" :xl="16">
                <div class="descbox">
                  <div class="mptitle">{{item.courseName}}</div>
                  <div class="mptext mpline85 hidden-sm-and-down">
                    <nuxt-link to="/">{{item.description}}</nuxt-link>
                  </div>
                  <div class="mpviewmenu mpline40">
                    <i class="color1 el-icon-view" />
                    <span class="color2">125311</span>人
                    <el-button class="btsm bcolor1">
                      学习
                      <i class="el-icon-caret-right el-icon--right"></i>
                    </el-button>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="samehl hidden-sm-and-down" :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
        <div class="rightline-box">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>最近更新</span>
            </div>
            <div v-for="(nd,index) in nodes" :key="index" class="updatelist">
              <nuxt-link to="/">
                <div class="menutitle">
                  <span :class="'number'+index">{{index+1}}.</span>
                  {{nd.nodeName}}
                </div>
                <div class="menutitlecount">
                  <i class="mtc color1 el-icon-view" />
                  {{nd.viewCount}}人
                </div>
              </nuxt-link>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  async asyncData({ app }) {
    //课程信息查询
    const result = await app.$axios.$get(
      `/course/list/${app.context.route.params.id}`
    );
    return result;
  }
};
</script>